<!-- 组件 -->
<template>
  <div v-if="aqi" class="weather-aqi" :style="'background:' + bg + ';'">
    <span>{{ this.aqi }} </span>
    <span>{{ text }}</span>
  </div>
</template>

<script>
export default {
  name: '',
  props: {
    aqi: {
      type: String | Number,
      default: null,
    },
  },
  data() {
    return {
      bg: '#a7cf8c',
      text: '优',
    };
  },
  created() {
    this.airQuality(this.aqi);
  },
  components: {},
  watch: {
    aqi(newValue) {
      this.airQuality(this.aqi);
    },
  },
  methods: {
    airQuality(aqi) {
      if (aqi >= 0 && aqi <= 50) {
        this.bg = '#a7cf8c';
        this.text = '优';
      } else if (aqi >= 51 && aqi <= 100) {
        this.bg = '#f7da64';
        this.text = '良';
      } else if (aqi >= 101 && aqi <= 150) {
        this.bg = '#f29e39';
        this.text = '轻度';
      } else if (aqi >= 151 && aqi <= 200) {
        this.bg = '#da555d';
        this.text = '中度';
      } else if (aqi >= 201 && aqi <= 300) {
        this.bg = '#b9377a';
        this.text = '重度';
      } else if (aqi >= 301 && aqi <= 500) {
        this.bg = '#881326';
        this.text = '严重';
      } else if (aqi >= 501) {
        this.bg = '#000000';
        this.text = '严重';
      } else {
        this.bg = '#a7cf8c';
        this.text = '优';
      }
    },
  },
};
</script>

<style scoped>
.weather-aqi {
  color: #fff;
  font-size: 12px;
  padding: 2px 4px;
  border-radius: 4px;
  display: inline-block;
}
</style>
